<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>danceWeui框架</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta content="black" name="apple-mobile-web-app-status-bar-style">
	<meta content="telephone=no" name="format-detection">
	<link rel="stylesheet" href="../../css/weui.min.css">
	<link rel="stylesheet" href="../../css/danceWeui.css">
	<link rel="stylesheet" href="../../../iconfont/iconfont.css">
</head>
<body class="page__bg">
<div class="daui-navbar bg-gradual-blue">
	<div class="daui-navbar__hd">
		<a href="javascript:history.back(-1)"><i class="iconfontzz icon-fanhuijiantou"></i>返回</a>
	</div>
	<div class="daui-navbar__bd">布局</div>
	<div class="daui-navbar__hd">
		<a href="../index.html"><i class="iconfontzz icon-home"></i></a>
	</div>
</div>

<div class="daui-headline daui-headline_left">
	<div class="daui-headline__text-area">
		<h2 class="daui-headline__title">布局 Layout</h2>
		<p class="daui-headline__desc">flex布局和grid布局</p>
	</div>
</div>

<div class="daui-cells__title daui-cells_titlebar daui-cells_titlebar-danger">flex布局</div>
<div class="bg-white padding">
	<div class="daui-flex text-center">
		<div class="daui-flex__item"><div class="bg-light-green margin-xs padding-tb-xs">danceui</div></div>
	</div>
	<div class="daui-flex text-center">
		<div class="daui-flex__item"><div class="bg-light-green margin-xs padding-tb-xs">danceui</div></div>
		<div class="daui-flex__item"><div class="bg-light-blue margin-xs padding-tb-xs">danceui</div></div>
	</div>
	<div class="daui-flex text-center">
		<div class="daui-flex__item"><div class="bg-light-green margin-xs padding-tb-xs">weui</div></div>
		<div class="daui-flex__item"><div class="bg-light-blue margin-xs padding-tb-xs">weui</div></div>
		<div class="daui-flex__item"><div class="bg-light-orange margin-xs padding-tb-xs">weui</div></div>
	</div>
	<div class="daui-flex text-center">
		<div class="daui-flex__item"><div class="bg-light-green margin-xs padding-tb-xs">weui</div></div>
		<div class="daui-flex__item"><div class="bg-light-blue margin-xs padding-tb-xs">weui</div></div>
		<div class="daui-flex__item"><div class="bg-light-orange margin-xs padding-tb-xs">weui</div></div>
		<div class="daui-flex__item"><div class="bg-light-brown margin-xs padding-tb-xs">weui</div></div>
	</div>
</div>

<div class="daui-cells__title daui-cells_titlebar daui-cells_titlebar-danger">百分比布局布局</div>
<div class="bg-white padding">
	<div class="daui-flex text-center">
		<div class="daui-col-12"><div class="bg-light-green margin-xs padding-tb-xs">12：100%</div></div>
	</div>
	<div class="daui-flex text-center">
		<div class="daui-col-6"><div class="bg-light-green margin-xs padding-tb-xs">6：50%</div></div>
		<div class="daui-col-6"><div class="bg-light-blue margin-xs padding-tb-xs">6：50%</div></div>
	</div>
	<div class="daui-flex text-center">
		<div class="daui-col-4"><div class="bg-light-green margin-xs padding-tb-xs">4：33.33%</div></div>
		<div class="daui-col-4"><div class="bg-light-blue margin-xs padding-tb-xs">4：33.33%</div></div>
		<div class="daui-col-4"><div class="bg-light-orange margin-xs padding-tb-xs">4：33.33%</div></div>
	</div>
	<div class="daui-flex text-center">
		<div class="daui-col-4"><div class="bg-light-green margin-xs padding-tb-xs">3：25%</div></div>
		<div class="daui-col-4"><div class="bg-light-blue margin-xs padding-tb-xs">3：25%</div></div>
		<div class="daui-col-4"><div class="bg-light-orange margin-xs padding-tb-xs">3：25%</div></div>
		<div class="daui-col-4"><div class="bg-light-brown margin-xs padding-tb-xs">3：25%</div></div>
	</div>
	<div class="daui-flex text-center">
		<div class="daui-col-8"><div class="bg-light-green margin-xs padding-tb-xs">8：66.66%</div></div>
		<div class="daui-col-4"><div class="bg-light-blue margin-xs padding-tb-xs">4：33.33%</div></div>
	</div>
</div>

<div class="daui-cells__title daui-cells_titlebar daui-cells_titlebar-danger">水平对齐(justify)</div>
<div class="bg-white padding">
	<div class="daui-flex justify-start text-center">
		<div class="daui-col-4"><div class="bg-light-green margin-xs padding-tb-xs">col-4</div></div>
		<div class="daui-col-4"><div class="bg-light-blue margin-xs padding-tb-xs">col-4</div></div>
	</div>
	<div class="daui-flex justify-end text-center">
		<div class="daui-col-4"><div class="bg-light-green margin-xs padding-tb-xs">col-4</div></div>
		<div class="daui-col-4"><div class="bg-light-blue margin-xs padding-tb-xs">col-4</div></div>
	</div>
	<div class="daui-flex justify-center text-center">
		<div class="daui-col-6"><div class="bg-light-green margin-xs padding-tb-xs">col-6</div></div>
		<div class="daui-col-4"><div class="bg-light-blue margin-xs padding-tb-xs">col-4</div></div>
	</div>
	<div class="daui-flex justify-center text-center">
		<div class="daui-col-3 "><div class="bg-light-green margin-xs padding-tb-xs">Thor UI</div></div>
		<div class="daui-col-3"><div class="bg-light-blue margin-xs padding-tb-xs">Thor UI</div></div>
		<div class="daui-col-3"><div class="bg-light-orange margin-xs padding-tb-xs">Thor UI</div></div>
	</div>
	<div class="daui-flex justify-center text-center">
		<div class="daui-col-6"><div class="bg-light-green margin-xs padding-tb-xs">col-6 </div></div>
		<div class="daui-col-6"><div class="bg-light-blue margin-xs padding-tb-xs">col-6</div></div>
	</div>
	<div class="daui-flex justify-center text-center">
		<div class="daui-col-4"><div class="bg-light-green margin-xs padding-tb-xs">col-4</div></div>
		<div class="daui-col-4"><div class="bg-light-blue margin-xs padding-tb-xs">col-4</div></div>
		<div class="daui-col-4"><div class="bg-light-orange margin-xs padding-tb-xs">col-4</div></div>
	</div>
	<div class="daui-flex justify-between text-center">
		<div class="daui-col-4"><div class="bg-light-green margin-xs padding-tb-xs">col-4</div></div>
		<div class="daui-col-4"><div class="bg-light-blue margin-xs padding-tb-xs">col-4</div></div>
	</div>
	<div class="daui-flex justify-around text-center">
		<div class="daui-col-4"><div class="bg-light-green margin-xs padding-tb-xs">col-4</div></div>
		<div class="daui-col-4"><div class="bg-light-blue margin-xs padding-tb-xs">col-4</div></div>
	</div>
</div>

<div class="daui-cells__title daui-cells_titlebar daui-cells_titlebar-danger">垂直对齐(align)</div>
<div class="bg-white padding">
	<div class="daui-flex align-start text-center">
		<div class="daui-col-4"><div class="bg-light-green padding-lg margin-xs">Danceui</div></div>
		<div class="daui-col-4"><div class="bg-light-blue padding-sm margin-xs">start</div></div>
	</div>
	<div class="daui-flex align-end text-center">
		<div class="daui-col-4"><div class="bg-light-green padding-lg margin-xs">Danceui</div></div>
		<div class="daui-col-4"><div class="bg-light-blue padding-sm margin-xs">end</div></div>
	</div>
	<div class="daui-flex align-center text-center">
		<div class="daui-col-4"><div class="bg-light-green padding-lg margin-xs">Danceui</div></div>
		<div class="daui-col-4"><div class="bg-light-blue padding-sm margin-xs">center</div></div>
	</div>
</div>

<div class="daui-cells__title daui-cells_titlebar daui-cells_titlebar-danger">grid布局(等分列)</div>
<div class="bg-white padding">
	<div class="daui-grid col-1 margin-bottom text-center">
		<div class="daui-grid__item padding bg-cyan">1</div>
		<div class="daui-grid__item padding bg-blue">2</div>
	</div>
	<div class="daui-grid col-2 margin-bottom text-center">
		<div class="daui-grid__item padding bg-cyan">1</div>
		<div class="daui-grid__item padding bg-blue">2</div>
		<div class="daui-grid__item padding bg-cyan">3</div>
		<div class="daui-grid__item padding bg-blue">4</div>
	</div>
	<div class="daui-grid col-3 margin-bottom text-center">
		<div class="daui-grid__item padding bg-cyan">1</div>
		<div class="daui-grid__item padding bg-blue">2</div>
		<div class="daui-grid__item padding bg-cyan">3</div>
		<div class="daui-grid__item padding bg-blue">4</div>
		<div class="daui-grid__item padding bg-cyan">5</div>
		<div class="daui-grid__item padding bg-blue">6</div>
	</div>
	<div class="daui-grid col-4 margin-bottom text-center">
		<div class="daui-grid__item padding bg-cyan">1</div>
		<div class="daui-grid__item padding bg-blue">2</div>
		<div class="daui-grid__item padding bg-cyan">3</div>
		<div class="daui-grid__item padding bg-blue">4</div>
		<div class="daui-grid__item padding bg-cyan">5</div>
		<div class="daui-grid__item padding bg-blue">6</div>
		<div class="daui-grid__item padding bg-cyan">7</div>
		<div class="daui-grid__item padding bg-blue">8</div>
	</div>
</div>

<div class="daui-cells__title daui-cells_titlebar daui-cells_titlebar-danger">浮动</div>
<div class="bg-white padding">
	<div class="clearfix padding-sm">
		<div class="bg-grey radius pull-left padding-sm">pull-left</div>
		<div class="bg-grey radius pull-right padding-sm">pull-right</div>
	</div>
</div>

<div class="daui-cells__title daui-cells_titlebar daui-cells_titlebar-danger">演示案例(菜单)</div>
<div class="daui-card daui-card_mellow daui-card_titbar-two">
	<div class="daui-card__hd">
		功能菜单
	</div>
	<div class="daui-card__bd">
		<div class="daui-grid col-4 no-border">
			<div class="daui-grid__item">
				<div class="daui-grid_icon">
					<div class="text-xxl iconfontzz icon-zd-zhengguifapiao" style="color: #9DCA06;"></div>
				</div>
				<div class="daui-grid_text">签到</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid_icon">
					<div class="text-xxl iconfontzz icon-zd-qianbao" style="color: #FFB300;"></div>
				</div>
				<div class="daui-grid_text">钱包</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid_icon">
					<div class="text-xxl iconfontzz icon-zd-xihuan" style="color: #53bcf5;"></div>
				</div>
				<div class="daui-grid_text">收藏夹</div>
				<div class="text-xs text-gray">5条</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid_icon">
					<div class="text-xxl iconfontzz icon-footprint" style="color: #FFB300;"></div>
				</div>
				<div class="daui-grid_text">足迹</div>
			</div>
		</div>
	</div>
</div>

<div class="daui-card daui-card_mellow daui-card_titbar-two">
	<div class="daui-card__hd">
		我的订单
	</div>
	<div class="daui-card__bd">
		<div class="daui-grid col-4 no-border">
			<div class="daui-grid__item">
				<div class="daui-grid_icon">
					<div class="iconfontzz icon-pay text-gray">
						<div class="daui-badge badge">1</div>
					</div>
				</div>
				<div class="daui-grid_text">待付款</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid_icon">
					<div class="iconfontzz icon-pay text-gray">
						<div class="daui-badge badge">2</div>
					</div>
				</div>
				<div class="daui-grid_text">待发货</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid_icon">
					<div class="iconfontzz icon-send text-gray">
					</div>
				</div>
				<div class="daui-grid_text">待收货</div>
			</div>
			<div class="daui-grid__item">
				<div class="daui-grid_icon">
					<div class="iconfontzz icon-evaluate text-gray">
						<div class="daui-badge badge">5</div>
					</div>
				</div>
				<div class="daui-grid_text">待评价</div>
			</div>
			<div class="daui-grid__item" @tap="openMyOrder('5')">
				<div class="daui-grid_icon">
					<div class="iconfontzz icon-refund text-gray">
						<div class="daui-badge badge">2</div>
					</div>
				</div>
				<div class="daui-grid_text">退款/售后</div>
			</div>
		</div>
	</div>
</div>

<div class="daui-gap daui-gap_transparent"></div>
<div class="daui-footer">
	<div class="daui-footer__links">
		<a class="daui-footer__links-item" href="../index.html">DanceWeUI首页</a>
		<a class="daui-footer__links-item" href="https://gitee.com/lianlianzan/danceui" target="_blank">去码云下载</a>
	</div>
	<div class="daui-footer__text">Copyright &copy; DanceUI</div>
</div>

</body>
</html>